import React, { useState } from 'react'
import { DatePicker, InputNumber, Input, Row, Col } from 'antd'
import moment from 'moment'
import ComputeItem from './ComputeItem/index'
import styles from './index.css'
import { RangePickerValue } from 'antd/lib/date-picker/interface'
import { func } from 'prop-types'

interface DataItems {
  netValueDate: string;
  netValue: string;
  totalNetValue: string;
  dayOfGrowth: string;
}

export interface IComputeChangeValue {
  fundCode?: string;
  money4Day?: number;
  rangeValue?: RangePickerValue;
}

const { RangePicker } = DatePicker;

interface ComputeProps {
  rangeValue: RangePickerValue;
  fundCode: string;
  dataSource: DataItems[];
  funds: [string, string, string][];
  onChange(value: IComputeChangeValue): void;
}

export default function Compute(props: ComputeProps) {
  const [money4Day, setMoney4Day] = useState(30)

  // 改变定投时间
  const handleChangeTime = (rangeValue: RangePickerValue) => {
    props.onChange({
      rangeValue
    })
  }

  // 改变基金代码
  const handleChangeFundCode = (e: React.ChangeEvent<HTMLInputElement>) => {
    const fundCode = e.target.value
    props.onChange({
      fundCode
    })
  }

  // 计算基金每日定投的收益
  const computeResult = (fundData, money4Day) => {
    let finalValue = money4Day
    if (fundData.length > 1) {
      for (let i = 1, len = fundData.length; i < len; i++) {
        const percent = Number.parseFloat(fundData[i].dayOfGrowth)
        finalValue = finalValue * (1 + (percent ? percent * 0.01 : 0))

        const day = moment(fundData[i].netValueDate).day()

        // 周六周日不定投
        if (day !== 6 && day !== 7 && day !== 0) {
          finalValue += money4Day
        }
      }
    }

    const input = fundData.length * money4Day
    const output = Number.parseFloat(finalValue.toFixed(2))
    const percent = ((output / input - 1) * 100).toFixed(2)
    return {
      input,
      output,
      percent
    }
  }

  // 计算基金每日定投的收益（只在跌了之后再投）
  const computeStrategyResult = (fundData, money4Day) => {
    let finalValue = money4Day
    let inputValue = money4Day

    if (fundData.length > 1) {
      for (let i = 1, len = fundData.length; i < len; i++) {
        const percent = Number.parseFloat(fundData[i].dayOfGrowth)
        finalValue = finalValue * (1 + (percent ? percent * 0.01 : 0))

        const day = moment(fundData[i].netValueDate).day()

        // 周六周日不定投
        if (day !== 6 && day !== 7 && day !== 0) {
          if (percent < 0) {
            inputValue += money4Day
            finalValue += money4Day
          }
        }
      }
    }
    const input = Number.parseFloat(inputValue.toFixed(2))
    const output = Number.parseFloat(finalValue.toFixed(2))
    const percent = ((output / input - 1) * 100).toFixed(2)
    return {
      input,
      output,
      percent
    }
  }

  const { rangeValue, fundCode, dataSource, funds } = props
  const fundInfo = funds.find(l => l[0] == fundCode)
  const result = computeResult(dataSource, money4Day)
  const strategyResult = computeStrategyResult(dataSource, money4Day)

  return <div className={styles['container']}>
    <Row>
      <Col span={18}>
        <div className={styles['compute-container']}>
          <ComputeItem label="基金代码">
            <Input onChange={handleChangeFundCode} value={fundCode} placeholder='如:100032' style={{ width: 100 }} />
            <span className={styles['fund-name']}>{fundInfo ? fundInfo[2] : '未识别基金'}</span>
          </ComputeItem>
          <ComputeItem label="定投时间区间">
            <RangePicker onChange={handleChangeTime} value={rangeValue} />
          </ComputeItem>
          <ComputeItem label="定投金额">
            <InputNumber min={1} onChange={setMoney4Day} value={money4Day} />
          </ComputeItem>
        </div>
      </Col>
      <Col span={6}>
        <ComputeItem label="累计投入">
          {result.input}
        </ComputeItem>
        <ComputeItem label="最终输出">
          {result.output}
        </ComputeItem>
        <ComputeItem label="收益率">
          {result.percent}%
        </ComputeItem>
        <ComputeItem label="策略累计投入">
          {strategyResult.input}
        </ComputeItem>
        <ComputeItem label="最终输出">
          {strategyResult.output}
        </ComputeItem>
        <ComputeItem label="收益率">
          {strategyResult.percent}%
        </ComputeItem>
      </Col>
    </Row>
  </div>
}
